<template>
  <div class="home">
    <div class="association-header">
      <el-checkbox-group v-model="dateChecked" @change="changeDate">
        <el-checkbox
          v-for="(item, index) in dateRadioList"
          :key="index"
          :label="item.name"
          :value="item.data"
        />
      </el-checkbox-group>
      <el-radio-group v-model="checked" @change="changeCheck" class="radio-group">
        <el-radio :value="item.data" v-for="(item, index) in menuRadioList" :key="index">{{
          item.name
        }}</el-radio>
      </el-radio-group>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%; border-radius: 6px"
        :span-method="mergeCells"
        border
        :header-cell-style="setHeaderStyle"
      >
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { baseTargetData } from './modules/associationTarget'
const {
  checked,
  dateChecked,
  menuRadioList,
  dateRadioList,
  tableData,
  tableColumns,
  changeDate,
  changeCheck,
  mergeCells,
  setHeaderStyle
} = baseTargetData()
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.association-target {
  margin-top: 14px;
  .association-header {
    display: flex;
    align-items: center;
    height: 32px;
    .radio-group {
      margin-left: 32px;
    }
  }
  .table-box {
    margin-top: 14px;
    width: 100%;
  }
}
</style>
